<template>
  <div class="step2">
    <div class="top border">
      <div class="title">案件类型</div>
      <div class="content">
        <el-radio-group v-model="param.categoryId">
          <el-radio
            v-for="(item, index) of dict.type.sys_carage_type"
            :key="index + 'g'"
            :label="item.value"
            @change="ongrandsonchange(item, 'categoryName', 'categoryId')"
            class="stepradio"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div class="bottom border" v-if="dict.type[param.categoryId]">
      <div class="title">案件小类</div>
      <div class="content">
        <el-radio-group v-model="param.subCategoryId">
          <el-radio
            class="stepradio"
            v-for="(item, index) of dict.type[param.categoryId]"
            :key="index + 's'"
            @change="ongrandsonchange(item, 'subCategoryName', 'subCategoryId')"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div class="bottom border" v-if="dict.type[param.subCategoryId]">
      <div class="content">
        <el-radio-group v-model="param.thirdCategoryId">
          <el-radio
            class="stepradio"
            v-for="(item, index) of dict.type[param.subCategoryId]"
            :key="index + 's'"
            @change="
              ongrandsonchange(item, 'thirdCategoryName', 'thirdCategoryId')
            "
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <div class="registration">
      <el-radio v-model="param.registerType" :label="1">正式登记</el-radio>
      <el-radio v-model="param.registerType" :label="0">备案登记</el-radio>
    </div>
    <div class="btn-group">
      <el-button @click="onclick(1)" type="warning">上一步</el-button>
      <el-button
        @click="onclick(2)"
        :disabled="![0, 1].includes(param.registerType)"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
import { list } from "@/api/system/case";
export default {
  dicts: [
    "sys_carage_type",
    "sys_carage_type_1",
    "sys_carage_type_2",
    "sys_carage_type_3",
    "sys_carage_type_4",
    "sys_carage_type_6",
    "sys_carage_type_9",
    "sys_carage_type_10",
    "sys_carage_type_10_hasson_1",
    "sys_carage_type_6_1_hasson",
    "sys_carage_type_11",
    "sys_carage_type_6_2",
    "sys_carage_type_6_4",
    "sys_carage_type_10_2",
    "sys_carage_type_1_2", // 民事诉讼-债权
    "sys_carage_type_1_3", // 民事诉讼-知识产权纠纷
    "sys_carage_type_1_4", // 民事诉讼-婚姻家庭纠纷
    "sys_carage_type_1_5", // 民事诉讼-商事纠纷
  ],
  data() {
    return {
      typeGvalue: "",
      type: "",
      registration: "",
      tree: [],

      param: {
        registerType: "",
        categoryId: "",
        subCategoryId: "",
        categoryName: "",
        subCategoryName: "",
        suit: "",
        thirdCategoryName: "",
        thirdCategoryId: "",
      },
    };
  },
  mounted() {
    console.log(888);
    setTimeout(() => {
      console.log("更改了")
      this.param.categoryId = "sys_carage_type_1";
      this.param.categoryName = "民事纠纷";
    }, 200)
    // this.param.subCategoryId = this.dict.type.sys_carage_type_1[0].value;
  },
  computed: {
    children() {
      let arr = this.tree.filter((res) => {
        return res.categoryId == this.param.categoryId;
      });
      console.log(arr);
      return arr[0]?.children || [];
    },
    grandson() {
      let arr = this.children.filter((res) => {
        return res.categoryId == this.param.subCategoryId;
      });
      console.log(arr);
      return arr[0]?.children || [];
    },
  },
  watch: {
    "param.categoryId"(newVale) {
      this.param.subCategoryId = "";
      this.param.subCategoryName = "";
      if (this.dict.type[newVale]) {
        let arr = JSON.parse(JSON.stringify(this.dict.type[newVale]));
        this.param.subCategoryName = arr[0]?.label;
        this.param.subCategoryId = arr[0]?.value;
      }
    },
    "param.subCategoryId"(newVale) {
      this.param.thirdCategoryName = "";
      this.param.thirdCategoryId = "";
      if (this.dict.type[newVale]) {
        let arr = JSON.parse(JSON.stringify(this.dict.type[newVale]));
        this.param.thirdCategoryName = arr[0]?.label;
        this.param.thirdCategoryId = arr[0]?.value;
      }
    },
  },
  methods: {
    ongrandsonchange(item, name, id) {
      this.param[name] = item.label; //
      this.param[id] = item.value; //
      console.log(this.param);
    },
    onclick(type) {
      if (type == 1) {
        this.$emit("back");
      } else {
        this.$emit("next", {
          ...this.param,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.step2 {
  margin: 50px 100px;

  .border {
    border: 2px solid rgb(173, 169, 169);
    border-image-source: linear-gradient(55deg, #c5c7d1, #6f79cb);
    border-image-slice: 1;
    border-image-repeat: stretch;
    padding: 30px 20px;
    position: relative;
    border-radius: 3px;
    margin-bottom: 30px;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: -10px;
    background: white;
    padding: 0px 5px;
  }
  .bottom {
    margin-top: 50px;
  }
  .registration {
    text-align: center;
  }
  .btn-group {
    text-align: center;
    margin-top: 80px;
  }
}
::v-deep label.el-radio.stepradio {
  width: 30%;
  min-width: 200px;
}
</style>
